<template>
  <div class="main-box growth">
    <div class="main">
      <div class="middle">
        <div class="left">
          <el-map
            ref="map"
            :loading.sync="mapLoading"
            v-loading="allLoading"
            element-loading-background="rgba(0, 0, 0, 0)"
          ></el-map>
        </div>
        <div class="right">
          <p class="refresh">数据每隔五分钟自动刷新<button class="btn1" @click="refresh"><i class="iconfont">&#xe667;</i>刷新</button></p>
          <ul class="ranking">
            <li>
              <h3 class="title"><em></em>以平均身高高低排名</h3>
              <div class="content">
                <el-line
                  :xData="avgHeightRank.xData"
                  :data="avgHeightRank.data"
                  :color="avgHeightRank.color"
                  :yName="avgHeightRank.yName"
                  v-if="avgHeightRank.data[0].value.findIndex(v => v !== 0) !== -1 && avgHeightRank.data[1].value.findIndex(v => v !== 0) !== -1"
                ></el-line>
                <no-data v-else :item="'平均身高'" />
              </div>
            </li>
            <li>
              <h3 class="title"><em></em>以平均体重高低排名</h3>
              <div class="content">
                <bars
                  :xData="avgWeightRank.xData"
                  :data="avgWeightRank.data"
                  :color="avgWeightRank.color"
                  :yName="avgWeightRank.yName"
                  :grid="avgWeightRank.grid"
                  v-if="avgWeightRank.data[0].value.findIndex(v => v !== 0) !== -1 && avgWeightRank.data[1].value.findIndex(v => v !== 0) !== -1"
                ></bars>
                <no-data v-else :item="'平均体重'" />
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="line"></div>
      <div class="bottom">
        <ul class="statistics">
          <li>
            <h3 class="title"><em></em>女童/男童BMI分布</h3>
            <ul class="content">
              <li>
                <pie
                  :data="girlCheck.data"
                  :color="girlCheck.color"
                  :title="girlCheck.title"
                  v-if="girlCheck.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'女童BMI'" />
              </li>
              <li>
                <pie
                  :data="boyCheck.data"
                  :color="boyCheck.color"
                  :title="boyCheck.title"
                  v-if="boyCheck.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'男童BMI'" />
              </li>
            </ul>
          </li>
          <li></li>
          <li>
            <h3 class="title"><em></em>幼儿园信息</h3>
            <div class="content">
              <matts
                :data="gardenOverview"
              ></matts>
            </div>
          </li>
          <li>
            <h3 class="title"><em></em>教师信息</h3>
            <ul class="content">
              <li>
                <pie
                  :data="jobData.data"
                  :color="jobData.color"
                  :title="jobData.title"
                  :pieSize="jobData.pieSize"
                  v-if="jobData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'职称'" />
              </li>
              <li>
                <pie
                  :data="ageData.data"
                  :color="ageData.color"
                  :title="ageData.title"
                  :pieSize="ageData.pieSize"
                  v-if="ageData.data[0].name !== '暂无数据'"
                ></pie>
                <no-data v-else :item="'年龄'" />
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ElMap from '@/common/echarts/Map'
import Matts from '@/pages/home/healthy/today/components/Matts'
import Pie from '@/common/echarts/Pie'
import ElLine from '@/common/echarts/Line'
import Bars from '@/common/echarts/expand/Bars'
import Mixin from '@/pages/virtual/mixin'
export default {
  name: 'HealthyToday',
  components: {
    ElMap,
    Matts,
    Pie,
    ElLine,
    Bars
  },
  mixins: [Mixin],
  data () {
    return {
      mapLoading: true
    }
  },
  computed: {
    allLoading () {
      return this.loading || this.mapLoading
    },
    ...mapGetters({
      girlCheck: 'girlCheck',
      boyCheck: 'boyCheck',
      avgHeightRank: 'avgHeightRank',
      avgWeightRank: 'avgWeightRank',
      ageData: 'ageData',
      jobData: 'jobData'
    })
  },
  watch: {
    allLoading (val) {
      this.toggleLoading(val)
    }
  },
  methods: {
    // 刷新
    async refresh () {
      this.loading = true
      await this.$store.dispatch('fetchCheck')
      this.loading = false
    }
  },
  async mounted () {
    this.$store.commit('setMapTag', '身体发育')

    await this.basicFetch()
    await this.refresh()
  }
}
</script>

<style lang="stylus" scoped>
.growth
  .main
    .bottom
      .statistics > li:nth-child(1)
        flex: 0 0 50%
        .content
          li
            float: left
            width: 50%
            height: 100%
            padding: 20px 10px
            box-sizing: border-box
      .statistics > li:nth-child(2)
        display: none
</style>
